<template>
	<view class="container">
		<Header title="订单详情"></Header>
		<view class="order-details">
		    <view class="header bg-color acea-row row-middle">
				<view class="data">
					<view class="state">{{orderInfo.orderStatusText}}</view>
				</view>
		    </view>
		   <view>
		    
		    <view class="address" v-if="orderInfo.consign.consignee">
				<view class="name">
					{{orderInfo.consign.consignee}}
					<text class="phone">{{orderInfo.consign.phone}}</text></view>
					<view>{{orderInfo.consign.address}}</view>
				</view>
		    </view>
		    <view class="orderGoods">
				<view class='goodWrapper'>
					<view class='item acea-row row-between-wrapper' v-for="(item, index) in orderInfo.goods" :key="index">
						<view class='pictrue'>
							<image :src="item.thumb"></image>
						</view>
						<view class='text'>
						    <view class='acea-row row-between-wrapper'>
								<view class='name line1'>{{item.goodsName}}</view>
								<view class='num'>x {{item.goodsNum}}</view>
							</view>
						    <view class='money font-color'>积分：{{item.credit}}</view>
						</view>
					</view>
				</view>
		    </view>
		   <!-- <button open-type="contact" hover-class='none' class="contactCustomer font-color"><text class='iconfont icon-kefu'></text>联系客服</button> -->
		   <view class="wrapper">
		      <view class="item acea-row row-between">
		        <view>订单编号：</view>
		        <view class="conter acea-row row-middle row-right">{{orderInfo.orderNo}}</view>
		      </view>
		      <view class="item acea-row row-between">
		         <view>下单时间：</view>
		         <view class="conter acea-row row-middle row-right">{{orderInfo.createdAt}}</view>
		      </view>
		   </view>
		   <view v-if="orderInfo.orderStatus >= 2">
				<view class='wrapper' v-if="orderInfo.goods && orderInfo.goods[0].goodsCategoryId == 2">
					<!-- <view class='item acea-row row-between'>
					  <view>配送方式：</view>
					  <view class='conter acea-row row-middle row-right'>发货</view>
					</view> -->
					<view class='item acea-row row-between'>
						<view>快递公司：</view>
						<view class='conter acea-row row-middle row-right'>{{orderInfo.express.expressCompany}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>快递号：</view>
						<view class='conter acea-row row-middle row-right'>{{orderInfo.express.expressNo}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>发货时间：</view>
						<view class='conter acea-row row-middle row-right'>{{orderInfo.express.expressAt}}</view>
					</view>
				</view>
				<view class='wrapper' v-else>
					<view class='item acea-row row-between'>
						<view>虚拟发货：</view>
						<view class='conter acea-row row-middle row-right'>已发货，请注意查收</view>
					</view>
				</view>
		   </view>
		   <view class='wrapper'>
		      <view class='item acea-row row-between'>
		        <view>支付积分：</view>
		        <view class='conter'>{{orderInfo.totalCredit}}</view>
		      </view>
			</view>
			<template v-if="orderInfo.orderStatus == 1 || orderInfo.orderStatus == 2">
			    <view style='height:120rpx;'></view>
			    <view class='footer acea-row row-right row-middle'>
					<view class='bnt bg-color' @click='confirmOrder' v-if="orderInfo.orderStatus == 2">确认收货</view>
					<!-- <view class='bnt cancel' @click='delOrder' v-if="[-1, 0, 3].indexOf(orderInfo.orderStatus) >= 0">删除订单</view> -->
					<view class='bnt cancel' @click='cancleOrder' v-if="orderInfo.orderStatus == 1">取消订单</view>
			    </view>
		    </template>
		</view>
	</view>
</template>

<script>
	import Header from '@/subpages/components/header.vue'
	import {
		getOrderDetail,
		cancleOrder,
		confirmOrder
	} from '@/api/order.js'
	export default {
		components: {
			Header
		},
		data() {
			return {
				id: '',
				orderInfo: {
					consign: {},
					goods: [],
					express: {}
				}
			}
		},
		onLoad(params) {
			this.id = params.id
			this.getDetail()
		},
		methods: {
			async getDetail() {
				getOrderDetail({orderNo: this.id}).then(res => {
					if (res.code == 200) {
						this.orderInfo = res.data
					} else {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			// 取消订单
			cancleOrder() {
				cancleOrder({orderNo: this.id}).then(res => {
					if (res.code == 200) {
						this.getDetail()
					} else {						
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},
			// 确认收货
			confirmOrder() {
				confirmOrder({orderNo: this.id}).then(res => {
					if (res.code == 200) {
						this.getDetail()
					} else {						
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none',
						});
					}
				})
			}
		}
	}
</script>


<style lang="less" scoped>
	.bg-gradual-orange2 {
		background-image: linear-gradient(45deg, #FF707A, #FD505C);
		color: #ffffff;
	}

	.line-orange2 {
		color: #FF707A;
	}
	@import './order.css';
	.header{
		margin-left: 0;
	}
</style>
